<template>
	<view class="layout">
		<view class="list">
			<view class="title">
				{{title1}}
			</view>
			<view class="content">
				<view class="left">
					<qiun-data-charts :opts="opts" type="ring" :chartData="chartData" background="none" />
				</view>
				<view class="right">
					<uni-list>
						<uni-list-item :title="item.name +':'+ item.value" note="" v-for="(item,index) in sexDatas" :key="index"></uni-list-item>
					
					</uni-list>
				</view>
			</view>
			
		</view>
		
		<view class="list" v-if="title2">
			<view class="title">
				{{title2}}
			</view>
			<view class="content">
				<view class="left">
					<qiun-data-charts :opts="opts" type="ring" :chartData="aggData" background="none" />
				</view>
				<view class="right">
					<uni-list>
						<uni-list-item :title="item.name +':'+ item.value" note="" v-for="(item,index) in aggDatas" :key="index"></uni-list-item>
					
					</uni-list>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
const opts =ref(
	{
		"color": ['#FA8C15', '#1A90FE', '#2F54EA', '#52C41B'],
							"legend": {
								"show": false,
								"position": "right",
								"lineHeight": 25,
							},
							"title": {
								"name": 2356,
								"fontSize": 48 / 2,
								"color": "#323567"
							},
							"subtitle": {
								"name": '总计 (人)',
								"fontSize": 25 / 2,
								"color": "#9B9CB4"
							},
							"extra": {
								"ring": {
									"ringWidth": 30,
									"activeOpacity": 0.5,
									"activeRadius": 10,
									"offsetAngle": 0,
									"labelWidth": 15,
									"border": true,
									"borderWidth": 3,
									"borderColor": "#FFFFFF"
								},
							},
	}
	);

const sexDatas = ref([
	{
			"name": "男",
			"value": 1356
		},
		{
			"name": "女",
			"value": 1000
		}
]);	

const aggDatas = ref([
	{
			"name": "18以下",
			"value": 100
	},
	{
		"name": "18-21",
		"value": 1200
	},
	{
		"name": "22-25",
		"value": 900
	},
	
	{
		"name": "26-29",
		"value": 100
	},
	
	{
		"name": "30-33",
		"value": 50
	},
	{
		"name": "33以上",
		"value": 6
	}
]);	
const infoType = ref('');//页面类型
const title1 = ref('');//标题1
const title2 = ref('');//标题2
const chartData =ref({
						categories: [],
						"series": [{
							"data": sexDatas.value
						}],
});

const aggData =ref({
						categories: [],
						"series": [{
							"data": aggDatas.value
						}],
});

console.log(chartData.value);

onLoad((e)=>{
	infoType.value = e.type;
	if(infoType.value == 1){
		title1.value ='性别比例';
		title2.value ='年龄分布';
	}else{
		title1.value ='状态分布';
		title2.value ='';
		
		sexDatas.value = [
				{
					"name": "审核中",
					"value": 1356
				},
				{
					"name": "已通过",
					"value": 600
				},
				{
					"name": "未通过",
					"value": 400
				}
		];
			
		chartData.value = {
						categories: [],
						"series": [{
							"data": sexDatas.value
						}],
		} //必须重写一下才会更新
		
		console.log(sexDatas.value);
		console.log(chartData.value);
		
		aggDatas.value = [];	
	}
});



</script>

<style lang='scss' scoped>
	.layout{
		padding: 20rpx 30rpx;
		.list{
			padding: 20rpx 0;
			.title{
				color: $xx-color-body;
				font-weight: 600;
			}
			.content{
				.right{
					width: 400rpx;
					margin: 0 auto;
					padding-top: 20rpx;
					text-align: center;
				}
			}
		}
	}       
</style>
